<template>
  <div>
    <el-row class="lock-btn">
      <el-select v-model="form.parkfieldId" placeholder="请选择停车场">
        <el-option v-for="parkfield in parkfieldList" v-bind:key="parkfield.id" :label="parkfield.name" :value="parkfield.id"></el-option>
        </el-select>
      <el-select v-model="form.status" placeholder="请选状态">
        <el-option key="0" label="未处理" :value="0"></el-option>
        <el-option key="1" label="处理完成" :value="1"></el-option>
        <el-option key="2" label="异常" :value="2"></el-option>
      </el-select>
      <el-button-group>
        <el-button :disabled="userState" size="medium" type="primary" @click="queryBtn" round>搜索</el-button>
      </el-button-group>
    </el-row>
    <el-row style="box-shadow: rgb(205 205 205) 1px 1px 8px;">
      <el-col :span="24">
        <el-table :header-cell-style="{ background: '#ecf3fd',color:'#000000' }" highlight-current-row  ref="lcredepositrequestTable" v-loading="loading" :data="lcredepositrequests" :stripe="true" :row-key="'id'" :max-height="clientHeight" :height="clientHeight" @selection-change="handleTableChange">
 
          <el-table-column prop="appId" label="appid" width="200" sortable align="center">
          </el-table-column>
          <el-table-column prop="openId" label="openid" width="280" sortable align="center">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120" align="center">
          </el-table-column>
          <el-table-column prop="phone" label="电话" width="120" align="center">
          </el-table-column>
          <el-table-column prop="refundFee" label="退款金额" width="100" align="center">
          </el-table-column>
          <!-- <el-table-column prop="bankAccount" label="银行账户" width="200" align="center">
          </el-table-column>
          <el-table-column prop="bankName" label="银行名称" width="200" align="center">
          </el-table-column> -->
          <el-table-column prop="createDate" label="申请时间" width="200" align="center">
          </el-table-column>
          <el-table-column prop="refundDate" label="实退时间" width="200" align="center">
          </el-table-column>
          <el-table-column prop="refundChannel" label="退款方式" fixed="right" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.refundChannel == '0'" size="medium" type="success" effect="dark">微信</el-tag>
              <el-tag v-else-if="scope.row.refundChannel == '1'" size="medium" type="success" effect="dark">银行卡</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" fixed="right" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status == '0'" size="medium" type="info" effect="dark">未处理</el-tag>
              <el-tag v-else-if="scope.row.status == '1'" size="medium" type="success" effect="dark">处理完成</el-tag>
              <el-tag v-else-if="scope.row.status == '2'" size="medium" type="warning" effect="dark">异常</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" fixed="right" align="center">
            <template slot-scope="scope">
              <el-button :disabled="scope.row.status == '1'? true:false" size="mini" type="primary" @click="procRefund(scope.$index, scope.row, 1)" title="处理">处理</el-button>
              <el-button :disabled="scope.row.status == '1'? true:false" size="mini" type="danger" @click="procRefund(scope.$index, scope.row, 2)" title="异常">异常</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="page-tool">
        <el-pagination layout="total,sizes,prev, pager,next,jumper" :page-size="pageSize" :total="total" :page-sizes="[10, 20, 30, 40, 100]" @size-change="handlePageChange" @current-change="handleNoChange"></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
 
import { getNickName, getTestUserName } from "../../util/auth";
import { loadLcredepositrequestApi, procRefundApi } from "../../api/lcredepositrequest.js";
import { loadParkfieldApi } from '../../api/parkfield';

export default {
  name: "lcredepositrequest",
  data: function () {
    return {
      clientHeight:
        Math.max(
          document.documentElement.scrollHeight,
          document.body.scrollHeight
        ) -
        132 -
        5 +
        10 -
        28,
      labelWidth: "100px",
      loading: false,
      dialogTitle: "",
      pageNo: 1,
      pageSize: 20,
      total: 0,
      multipleSelection: [],
      lcredepositrequests: [],
      form: {
        status:'',
        parkfieldId:''
      },
      parkfieldList: [],
      parkfieldId: '',
      status: '',

    };
  },
  methods: {
    procRefund (index, row, status) {
      let _this = this;
      _this.loading = true;
      procRefundApi(row.id, status).then(resp => {
        console.log(resp)
        _this.loadLcredepositrequests(this.pageNo, this.pageSize);
        _this.$notify({
              title: "成功",
              message: "已处理",
              type: "success"
            });
      });
    },
    handlePageChange (pageSize) {
      this.pageSize = pageSize;
      this.loadLcredepositrequests(this.pageNo, this.pageSize);
    },
    handleNoChange (pageNo) {
      this.pageNo = pageNo;
      this.loadLcredepositrequests(this.pageNo, this.pageSize);
    },
    handleTableChange (val) {
      this.multipleSelection = val;
    },
    loadLcredepositrequests (pageNo,pageSize) {
      let _this = this;
      _this.loading = true;
      loadLcredepositrequestApi({
        pageNo:pageNo,
        pageSize:pageSize

      }
      ).then(resp => {
        _this.lcredepositrequests = resp.data;
        console.log(_this.lcredepositrequests)
        _this.total = resp.data.totalNum;
        _this.loading = false;
      });
    },
    loadParkfieldApi () {
      let _this = this;
      _this.loading = true;
      loadParkfieldApi().then(resp => {
        _this.parkfieldList = resp.data.dataList;
        console.log(_this.parkfieldList)
        _this.loading = false;
      });
    },
    queryBtn () {
      let _this = this;
      _this.loading = true;
      loadLcredepositrequestApi({ pageNo:pageNo,
        pageSize:pageSize,
        status:_this.form.status,
        parkfieldId:_this.form.parkfieldId
      }).then(resp => {
        _this.lcredepositrequests = resp.data;
        console.log(_this.lcredepositrequests)
        _this.loading = false;
      });
    }
  },
  computed: {
    userState () {
      return getNickName() === getTestUserName();
    }
  },
  mounted: function () {
    this.$nextTick(function () {
      this.loadLcredepositrequests(this.pageNo,this.pageSize);
      this.loadParkfieldApi ();
    });
  }
};
</script>

<style scoped>


.page-tool div {
  text-align: right;
}

.lock-btn {
  margin-bottom: 5px;
  margin-top: -10px;
}
.operateBtn {
  font-size: 18px;
  width: 32px;
  height: 32px;
  padding: 0;
}
</style>